<template>
  <div class="common-layout">
    <div class="loginDiv">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="loginForm">
        <el-header class="el-header">
          <div>
            <h4>用户角色权限管理系统</h4>
          </div>
        </el-header>
        <el-form-item  prop="username">
          <el-input @keyup.enter="submitForm(ruleFormRef)" placeholder="请输入用户名" autocomplete="on" v-model="ruleForm.username" clearable size="large">
            <template #prefix>
              <el-icon class="el-input_icon"><UserFilled/></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input @keyup.enter="submitForm(ruleFormRef)" v-model="ruleForm.password" :type="passwordType" placeholder="请输入密码" autocomplete="on"  size="large">
            <template #prefix>
              <el-icon class="el-input_icon">
                <GoodsFilled></GoodsFilled>
              </el-icon>
            </template>
            <template #suffix>
              <div class="show-pwd" @click="showPwd">
                <svg-icon :icon-class="passwordType === 'password'?'eye':'eye-open'"></svg-icon>
              </div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="captchaCode" v-if="enabled">
          <div class="input-wrapper">
            <el-input
                v-model="ruleForm.captchaCode"
                auto-complete="off"
                size="large"
                class="flex-1"
                placeholder="请输入验证码"
                @keyup.enter="submitForm(ruleFormRef)"
            >
              <template #prefix>
                <el-icon class="el-input_icon">
                  <svg-icon icon-class="captcha" class="mx-2" />
                </el-icon>
              </template>
            </el-input>
            <el-image @click="getCaptchaBtn" :src="img" class="captcha-image"/>
          </div>
        </el-form-item>
      </el-form>
      <div style="display: flex;justify-content: center;
									width:100%;margin-top: 20px;margin-bottom: 20px;">
        <el-button :loading="loading"
                   class="login-btn" plain type="primary" @click="submitForm(ruleFormRef)"
        >
          登&nbsp;&nbsp;陆
        </el-button>
      </div>
    </div>
    <div class="icp-info">
      <p>
        Copyright © 2024 - 2025 春慕秋来 All Rights Reserved.
        版权所有
      </p>
    </div>
	</div>
</template>

<script lang="ts" setup>
	import { ElMessage,ElNotification } from 'element-plus';
	import type { FormInstance } from 'element-plus';
  import {ref, reactive, onMounted} from 'vue'
	import logo from '@/assets/logo.png';
	import background from '@/assets/background.jpg';
	import {useUserStore} from '@/stores/user.ts'
	import {useRouteStore} from '@/stores/route.ts'
  import {login, loginInfo,getCaptcha} from '@/api/user';
	import {add} from '@/api/uv.ts'
	const userStore = useUserStore();
	const useRoute = useRouteStore();
	const router=useRoute.router;
	const ruleFormRef = ref<FormInstance>()
	const passwordType = ref('password')
	const loading = ref(false)
	const rules = reactive({
		password:[{required:true,message:'请输入密码',trigger:'blur'}],
		username:[{required:true,message:'请输入用户名',trigger:'blur'}],
    captchaCode: [
      {
        required: true,
        trigger: "blur",
        message: "验证码不能为空",
      },
    ]
	})
	const ruleForm = reactive({
		username:'test',
		password:'test',
    captchaCode:'',
    uuid:''
	})
  const enabled=ref(true)
  const img=ref()
  /** 获取验证码 */
  const getCaptchaBtn=()=> {
    getCaptcha().then((res) => {
      ruleForm.uuid = res.data.uuid;
      img.value = res.data.img;
      enabled.value=res.data.enabled
    });
  }
	const showPwd=()=>{
		passwordType.value = passwordType.value === 'password'?'':'password'
	}
	const submitForm = (formEl:FormInstance|undefined)=>{
		if(!formEl){
			return
		}
		formEl.validate(async (valid: any)=>{
			if(valid){
				loading.value = true;
				const {data,code} = await login({...ruleForm})
				if(code === 200){
					userStore.setToken(data.result,data.expiredTime)
					userStore.setMenus().then(()=>{
						console.log("结果2："+userStore.menues)
					})
          userStore.getDictionary()
          getLoginUserIfo()
					await router.push({
						  path: '/index',
					})
          // add({})
					ElMessage({
						message:'欢迎登录，RBAC管理系统',
						type:'success',
						duration:3000
					})
				}else{
					ElMessage.error("请检查用户名、密码或者验证码是否正确")
				}
				loading.value = false
			}else{
				loading.value = false
				return false
			}
		})
	}
  const getLoginUserIfo=()=>{
    loginInfo().then((res)=>{
      if(res.code === 200){
        userStore.setUserInfo(res.data)
      }
    })
  }
  onMounted(() => {
    getCaptchaBtn();
  });
</script>

<style scoped>
.icp-info{
  font-size: 16px;
}
.captcha-image{
  margin-left: 5px;
}
  .input-wrapper{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
	.common-layout{
		//background: url("@/assets/back3.jpg")  no-repeat center right;
    background: linear-gradient(90deg, honeydew, beige, whitesmoke);
    background-size: cover;
    background-position: center; /* 可选，确保图像居中 */
		height:95.5vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
	}
  .icp-info{
    position: absolute;
    bottom: 20px;
  }
	.show-pwd{
		position: absolute;
		right: 10px;
		top:7px;
		font-size: 16px;
		cursor: pointer;
		user-select: none;
	}
	::v-deep(.svg-icon){
		vertical-align: 0;
	}
	::v-deep(.el-input_inner){
		height: 40px;
	}
	.loginForm{
		width:60%;
    height: 100%;
	}
  .el-header{
    font-weight: bolder;
    text-align: center;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
	.loginDiv{
		display: flex;
    flex-direction: column;
		justify-content: center;
		align-items: center;
		height:auto;
    width: 40%;
    background: linear-gradient(90deg, ghostwhite, beige, whitesmoke);
    box-shadow:  0 0 8px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
	}
@media (max-width: 2560px) {
  .loginDiv{
    width: 30%;
  }
}
@media (max-width: 768px) {
  .common-layout{
    font-size: 16px;
  }
  .icp-info{
    font-size: 10px;
  }
  .loginDiv{
    width: 90%;
    background-color: red;
  }
}
</style>